<script setup lang="ts">
import { ElButton, ElInput, ElOption, ElSelect, Sort } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { Table } from '@/components/Table'
import { getCountriesListApi, delCountriesListApi } from '@/api/country'
import { getContinentsListApi } from '@/api/continent'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { TableColumn } from '@/types/table'
import { Search, SearchItem } from '@/components/Search'
import { Country } from '@/api/country/types'
import { boolean2string } from '@/utils/index'
import { Continent } from '@/api/continent/types'

defineOptions({
  name: 'Country'
})

const { push } = useRouter()

const conditions = reactive({
  code: '',
  name: '',
  continent_id: ''
})

const defaultSort = ref<Sort>({
  prop: 'sequence',
  order: 'ascending'
})

const regions = reactive<Array<Continent>>([])

const { register, tableObject, methods } = useTable<Country>({
  getListApi: getCountriesListApi,
  delListApi: delCountriesListApi,
  defaultSort: defaultSort.value
})

const { getList, setSearchParams, onSortChanged } = methods

setSearchParams(conditions)
getContinentsListApi({ pageIndex: -1, order: 'sequence' }).then((res) => {
  regions.length = 0
  Object.assign(regions, res.data.rows)
})

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'code',
    label: '代码',
    width: '200px',
    sortable: 'custom'
  },
  {
    field: 'name',
    label: '名称',
    width: 'auto',
    showOverflowTooltip: true
  },
  {
    field: 'continent.name',
    label: '洲',
    width: '200px',
    showOverflowTooltip: true
  },
  {
    field: 'disabled',
    label: '禁用',
    width: '100px',
    align: 'center',
    headerAlign: 'center',
    formatter: (row: Country) => {
      return boolean2string(row.disabled)
    }
  },
  {
    field: 'sequence',
    label: '序号',
    width: '100px',
    align: 'right',
    headerAlign: 'right',
    sortable: 'custom'
  },
  {
    field: 'action',
    width: '120px',
    label: '操作',
    headerAlign: 'center',
    align: 'center'
  }
])

const AddAction = () => {
  push('/geography/country-add')
}

const EditAction = (row: Country) => {
  push(`/geography/country-edit/id/${row.id}`)
}

const delLoading = ref(false)

const delData = async (row: Country) => {
  tableObject.currentRow = row
  const { delList } = methods
  delLoading.value = true
  await delList([tableObject.currentRow?.id as string], false).finally(() => {
    delLoading.value = false
  })
}
</script>

<template>
  <Search :model="conditions" @search="setSearchParams" @reset="setSearchParams">
    <SearchItem label="代码" prop="code">
      <ElInput v-model="conditions.code" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="名称" prop="name">
      <ElInput v-model="conditions.name" maxlength="200" clearable />
    </SearchItem>
    <SearchItem label="洲" prop="continent_id">
      <ElSelect v-model="conditions.continent_id" clearable>
        <ElOption v-for="item of regions" :key="item.id" :value="item.id!" :label="item.name" />
      </ElSelect>
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="AddAction">新建</ElButton>
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      :selection="false"
      :default-sort="defaultSort"
      @register="register"
      @sort-change="onSortChanged"
    >
      <template #action="{ row }">
        <ElButton type="primary" link size="small" @click="EditAction(row)"> 编辑 </ElButton>
        <ElButton type="danger" link size="small" @click="delData(row)"> 删除 </ElButton>
      </template>
    </Table>
  </div>
</template>
